<template>
	<view class="container">
		<!-- 		<view class="header">
			<view class="back-button" @click="goBack">&#8249;</view>
			<text class="page-title">订单详情</text>
		</view> -->

		<view class="order-info">
			<view class="order-id" style="display: flex;align-items: center;">
				<text>订单：{{ orderDetails.trade_id }}</text>
				<view class="loading" style="margin-left: auto;" v-if="showLoading"></view>
				<text class="order-id-value" style="margin-left: 10rpx;">{{ orderDetails.paid_type }}</text>
			</view>
			<view class="order-created">创建于{{ orderDetails._add_time }}</view>
			<text class="countdown" v-if="orderDetails.paid == 0 && (minutes != 0 && seconds != 0)"
			>请在<text style="color: #E4864D;margin: 0 10rpx;">{{ minutes }} 分 {{seconds}} 秒</text>完成汇款进行提交，以防订单自动失效</text>
			<view v-if="orderDetails.paid == 0 && minutes == 0 && seconds == 0" style="color: #f00;">订单已超时</view>
		</view>

		<view class="account-info">
			<view class="account-title">平台指定汇款账户</view>
			<view class="account-desc">请根据下方所提地址进行汇款，务必与充值金额一致</view>

			<view class="qrcode-container">
				<view class="qrcode">
					<!-- 二维码图片占位符 -->
					<image :src="qrCodeUrl" id="qrcodeImage" alt="QR Code" style="width: 100%; height: 100%;">
						<!-- {{orderDetails.pay_url}} -->
				</view>
				<text class="account-number">请仔细核对，与图片内地址一致方可充值</text>
				<text class="account-number" style="word-break:break-all">{{ orderDetails.usdt_address }}</text>
				<button class="copy-button" @click="copyWalletAddress(orderDetails.usdt_address)">复制钱包地址</button>
			</view>
		</view>

		<view class="amount-info" style="display: flex;align-items: center;
		justify-content: space-between;">
			<view class="amount-title">订单充值金额</view>
			<view class="amount-value">{{ orderDetails.price || 0 }}&nbsp;USDT</view>
		</view>

		<view class="amount-info">
			<view class="amount-title">我的钱包地址</view>
			<view class="amount-value" style="word-break:break-all">{{ orderDetails.usdt_address2 }}</view>
		</view>
	</view>
</template>

<script>
	import QRCode from 'qrcode';
	import {
		getRecord
	} from "@/api/recharge.js"
	export default {
		data() {
			return {
				order_id: '', // 订单id
				orderDetails: {}, // 订单信息

				targetTime: '',
				timer: null,
				timer2: null,
				minutes: 0,
				seconds: 0,
				qrCodeUrl: '',
				showLoading: false
			}
		},
		onShow() {

		},
		onHide() {

		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
			}
			if (this.timer2) {
				clearInterval(this.timer2);
			}
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.getRecordP().then(res => {
				this.targetTime = new Date(this.orderDetails.expire_time).getTime()
				this.QRCodeImage(this.orderDetails.pay_url)
				this.startCountdown();
			})
		},
		onReady() {
			this.timer2 = setInterval(() => {
				this.getRecordP()
			}, 10000)
		},
		methods: {
			QRCodeImage(text) {
				QRCode.toDataURL(text, (error, url) => {
					if (error) {
						console.error(error);
					} else {
						// imageElement.src = url; // 将二维码图像显示在 img 元素中
						console.log("QR Code image successfully generated!",url);
						this.qrCodeUrl = url
					}
				});
			},
			startCountdown() {
				this.timer = setInterval(() => {
					const currentTime = new Date().getTime();
					const timeRemaining = this.targetTime - currentTime;

					if (timeRemaining <= 0) {
						clearInterval(this.timer);
						this.minutes = 0;
						this.seconds = 0;
						
						return;
					}

					this.minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
					this.seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
				}, 1000);
			},
			copyWalletAddress(data) {
				uni.setClipboardData({
					data,
					success: () => {
						this.$util.Tips({
							title: '钱包地址已复制'
						});
					}
				});
			},
			getRecordP() {
				return new Promise((resolve, reject) => {
					getRecord({
						order_id: this.order_id
					}).then(res => {
						console.log(res)
						const {
							list
						} = res.data
						this.orderDetails = list[0]
						if(this.orderDetails.paid != 0) {
							this.showLoading = false
							clearInterval(this.timer2);
						} else {
							this.showLoading = true
						}
						resolve(list)
					}).catch((err) => {
						this.$util.Tips({
							title: err
						});
						reject(err)
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	}

	.container {
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
		background-color: #f5f5f5;
	}

	// .header {
	// 	background-color: #fff;
	// 	padding: 15px;
	// 	position: relative;
	// 	display: flex;
	// 	align-items: center;
	// }

	// .back-button {
	// 	position: absolute;
	// 	left: 15px;
	// 	font-size: 18px;
	// }

	// .page-title {
	// 	text-align: center;
	// 	font-size: 16px;
	// 	font-weight: 500;
	// 	flex: 1;
	// }

	.order-info {
		background-color: #fff;
		margin: 10px;
		padding: 15px;
		border-radius: 5px;
	}

	.order-id {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.order-id-value {
		color: #007aff;
	}

	.order-created {
		color: #999;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.countdown {
		color: #333;
		margin: 10px 0;
		font-size: 14px;
	}

	.account-info {
		background-color: #fff;
		margin: 10px;
		padding: 15px;
		border-radius: 5px;
	}

	.account-title {
		font-size: 16px;
		margin-bottom: 10px;
		font-weight: 500;
	}

	.account-desc {
		color: #999;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.qrcode-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 15px;
	}

	.qrcode {
		width: 150px;
		height: 150px;
		background-color: #f0f0f0;
		margin-bottom: 10px;
	}

	.account-number {
		font-size: 14px;
		color: #f44336;
		margin: 5px 0;
	}

	.copy-button {
		// width: 100%;
		padding: 16rpx 40rpx;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 5px;
		text-align: center;
		color: #666;
		font-size: 14px;
		margin-top: 10px;
	}

	.amount-info {
		background-color: #fff;
		margin: 10px;
		padding: 15px;
		border-radius: 5px;
	}

	.amount-title {
		font-size: 16px;
		margin-bottom: 5px;
		font-weight: 500;
	}

	.amount-value {
		display: flex;
		justify-content: flex-end;
		color: #999;
		font-size: 14px;
	}
	
	.loading {
	  width: 30rpx;
	  height: 30rpx;
	  border: 1rpx solid #007aff;
	  border-top-color: transparent;
	  border-radius: 100%;
	
	  animation: circle infinite 0.75s linear;
	}
	
	// 转转转动画
	@keyframes circle {
	  0% {
	    transform: rotate(0);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}
</style>